<template>
    <div>
        <div class="perTop">
            <el-input size="small" placeholder="请输入角色英文名" v-model="role.name">
                <template slot="prepend">ROLE_</template>
            </el-input>
            <el-input size="small" placeholder="请输入角色中文名" v-model="role.nameZh" @keydown.enter.native="addRole"></el-input>
            <el-button type="primary" size="small" icon="el-icon-plus" @click="addRole">添加角色</el-button>
        </div>
        <div class="perCenter">
            <el-collapse v-model="activeName" accordion @change="change">
                <el-collapse-item :title="role.nameZh" :name="role.id" v-for="(role,index) in roles" :key="index">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>菜单权限</span>
                            <el-button style="float: right; padding: 3px 0;color: red" icon="el-icon-remove" type="text" @click="deleteRole(role)">删除</el-button>
                        </div>
                        <div>
<!--                            default-checked-keys为预先选中的树节点-->
                            <el-tree
                                    node-key="id"
                                    show-checkbox
                                    :data="menus"
                                    ref="tree"
                                    :key="index"
                                    :default-checked-keys="selectMenus"
                                    :props="defaultProps"></el-tree>
                            <div style="display: flex;justify-content: flex-end">
                                <el-button size="mini" @click="changeActiveName">取消修改</el-button>
                                <el-button size="mini" type="primary" @click="doUpdate(role.id,index)">确认修改</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script>
    import {Message} from "element-ui";

    export default {
        name: "PerManager",
        data(){
            return{
                role:{
                    name:'',
                    nameZh:''
                },
                roles:[],
                menus:[],
                activeName:-1,
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                selectMenus:[]
            }
        },
        mounted() {
            this.getRoles();
        },
        methods:{
            deleteRole(role){
                this.$confirm('此操作将永久删除【' + role.nameZh+ '】职称, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/system/basic/per/role/"+role.id).then(resp=>{
                        if (resp){
                            this.getRoles();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            addRole() {
                if (this.role.name && this.role.nameZh) {
                    this.postRequest("/system/basic/per/role", this.role).then(resp => {
                        if (resp) {
                            this.role = {
                                name: '',
                                nameZh: ''
                            };
                            this.getRoles();
                        }
                    })
                } else {
                    Message.error({message: '请填写完整再添加角色！'});
                }
            },
            doUpdate(roleId,index){
                // vue通过设置一个ref元素来标识你想获取的元素，在表示后，
                // 可以通过this.$refs拿到所有被标记的元素，this.$refs.tree表示在被标记的元素中找到tree数组，然后通过index找到用户当前点击的tree元素
                let tree = this.$refs.tree[index];
                // getCheckedKeys为element提供的获取被选中的值，此处为菜单id值,传入true值只返回被选中的叶子节点
                let selectedKeys = tree.getCheckedKeys(true);
                let url = "/system/basic/per/?rid="+roleId;
                selectedKeys.forEach(key=>{
                    url += '&menuIds='+key;
                })
                this.putRequest(url).then(resp=>{
                    if(resp){
                        this.changeActiveName();
                    }
                })

            },
            //change为折叠面板的点击事件，手风琴模式下只展开一项，因此每次点开一项时，我们才去后端加载数据，而不是一进到页面就加载完全部菜单
            change(roleId){
                //点开时响应
                if(roleId){
                    this.getMenus();
                    this.selectMenus = [];
                    this.getSelectMenus(roleId);
                }
            },
            changeActiveName(){
                this.activeName = -1;
            },
            getSelectMenus(roleId){
                this.getRequest("/system/basic/per/getMidsByRoleIds/"+roleId).then(resp=>{
                    // console.log(this.selectMenus)
                    if(resp){
                        this.selectMenus = resp;
                    }
                })
            },
            getMenus(){
                this.getRequest("/system/basic/per/getallmenus").then(resp=>{
                    if(resp){
                        this.menus = resp;
                    }
                })
            },
            getRoles(){
                this.getRequest("/system/basic/per/").then(resp=>{
                    if(resp){
                        this.roles = resp;
                    }
                })
            }
        }
    }
</script>

<style>
    .perTop{
        display: flex;
        /*justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
        flex-start	默认值。项目位于容器的开头。
        */
        justify-content: flex-start;
    }
    .perTop .el-input{
        width: 300px;
        margin-right: 8px;

    }
    .perCenter{
        margin-top: 20px;
        width: 710px;
    }
</style>